<template>
    <div class="extra-curricular">
        <h3 align="center">活动成长</h3>
        <!-- 第一行卡片 -->
        <el-row justify="center">
            <el-col :span="8">
                <el-card shadow="hover" class="first-card">
                    <img src="@/assets/banner.png" class="image" />
                    <el-statistic
                        title="活动"
                        :value="totalActivities"
                        suffix="次"
                        class="demo-class"
                        :value-style="{ color: '#175797' }"
                    />
                </el-card>
                <el-card shadow="hover" style="height: 40px">
                    <div class="first-card-bottom">
                        本学期
                        <span class="blue">{{ semesterAmount }}</span>
                        次
                    </div>
                </el-card>
            </el-col>

            <el-col :span="8">
                <el-card shadow="hover" class="first-card">
                    <img src="@/assets/money.png" class="image" />
                    <el-statistic
                        title="积分"
                        :value="totalPoints"
                        suffix="分"
                        class="demo-class"
                        :value-style="{ color: '#F59A23' }"
                    />
                </el-card>
                <el-card shadow="hover" style="height: 40px">
                    <div class="first-card-bottom">
                        本学期
                        <span class="orange">{{ semesterTally }}</span>
                        分
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 第二行卡片 -->
        <el-row justify="center">
            <el-col :span="16">
                <el-card shadow="hover">
                    <el-table
                        :data="activitiesTableData"
                        ref="table"
                        :header-cell-style="{ textAlign: 'center' }"
                        :cell-style="{ textAlign: 'center' }"
                        height="450"
                        empty-text="暂无数据"
                        :loading="isActivitiesLoading"
                        :default-sort="{ prop: 'date', order: 'descending' }"
                    >
                        <el-table-column prop="name" label="活动名称" sortable />
                        <el-table-column prop="date" label="活动时间" sortable />
                        <el-table-column prop="type" label="活动类型" sortable>
                            <template #default="{ row }">
                                <el-tag v-if="row.type === '社会实践'" type="warning">社会实践</el-tag>
                                <el-tag v-else-if="row.type === '科技竞赛'" type="danger">科技竞赛</el-tag>
                                <el-tag v-else-if="row.type === '讲座'" type="warning">讲座</el-tag>
                                <el-tag v-else>{{ row.type }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="tally" label="活动积分" sortable />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <h3 align="center">深度辅导</h3>
        <!-- 第三行卡片 -->
        <el-row justify="center">
            <el-col :span="8">
                <el-card shadow="hover" class="third-card">
                    <img src="@/assets/doctor.png" class="image1" />
                    <el-statistic
                        title="深度辅导"
                        :value="totalCounsellings"
                        suffix="次"
                        class="demo-class"
                        :value-style="{ color: 'black' }"
                    />
                </el-card>
            </el-col>

            <el-col :span="8">
                <el-card shadow="hover" class="third-card">
                    <img src="@/assets/teacher.png" class="image1" />
                    <el-statistic
                        title="本学期深度辅导"
                        :value="totalSemesterAmount"
                        suffix="次"
                        class="demo-class"
                        :value-style="{ color: '#589CED' }"
                    />
                </el-card>
            </el-col>
        </el-row>

        <!-- 第四行卡片 -->
        <el-row justify="center" :gutter="10">
            <el-col :span="8">
                <el-card shadow="hover">
                    <h4 align="center" style="color: #909399; margin-top: 10px">辅导问题统计图</h4>
                    <div id="main"></div>
                </el-card>
            </el-col>

            <el-col :span="8">
                <el-card shadow="hover">
                    <el-table
                        :data="counsellingsTableData"
                        ref="table"
                        :header-cell-style="{ textAlign: 'center' }"
                        :cell-style="{ textAlign: 'center' }"
                        height="450"
                        empty-text="暂无数据"
                        :loading="isCounsellingsLoading"
                        :default-sort="{ prop: 'date', order: 'descending' }"
                    >
                        <el-table-column prop="date" label="辅导时间" sortable />
                        <el-table-column prop="mentor" label="辅导人" sortable />
                        <el-table-column prop="detail" label="辅导详情" />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script></script>

<script setup>
import { reactive, ref, onMounted, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
import api from '@/api/student'

const props = defineProps({
    extra: Object,
})

const activitiesTableData = reactive([])
const isActivitiesLoading = ref(false)
const counsellingsTableData = reactive([])
const isCounsellingsLoading = ref(false)

const semesterAmount = ref(0)
const semesterTally = ref(0)
const totalActivities = ref(0)
const totalPoints = ref(0)
const totalCounsellings = ref(0)
const totalSemesterAmount = ref(0)

const chartData = ref({
    xAxisData: [],
    seriesData: [],
})

const getActivities = async () => {
    if (props.extra && props.extra.id) {
        isActivitiesLoading.value = true

        try {
            const response = await api.getActivity(props.extra.id)
            activitiesTableData.splice(0)
            activitiesTableData.push(...response.data.activities)

            totalActivities.value = response.data.activities.length
            totalPoints.value = response.data.activities.reduce((sum, activity) => sum + activity.tally, 0)
            semesterAmount.value = response.data.semesterAmount
            semesterTally.value = response.data.semesterTally

            console.log(response.data)
            console.log('response.data.semesterTally' + response.data.semesterTally)
        } catch (error) {
            console.error(error)
        } finally {
            isActivitiesLoading.value = false
        }
    }
}

const getCounsellings = async () => {
    if (props.extra && props.extra.id) {
        isCounsellingsLoading.value = true
        try {
            const response = await api.getCounselling(props.extra.id)
            counsellingsTableData.splice(0)
            counsellingsTableData.push(...response.data.counsellings)
            totalCounsellings.value = response.data.counsellings.length
            totalSemesterAmount.value = response.data.semesterAmount

            const counselingCounts = reactive({})
            counsellingsTableData.forEach((item) => {
                const cls = item.cls
                counselingCounts[cls] = counselingCounts[cls] ? counselingCounts[cls] + 1 : 1
            })

            chartData.value.xAxisData = Object.keys(counselingCounts)
            chartData.value.seriesData = Object.values(counselingCounts)

            console.log(response.data.counsellings)
        } catch (error) {
            console.error(error)
        } finally {
            isCounsellingsLoading.value = false
        }
    }
}

const initBarChart = (data) => {
    const chart = echarts.init(document.getElementById('main'))
    chart.clear()

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            formatter: function (params) {
                const xData = params[0].axisValue
                const yData = params[0].data

                return `辅导类别：${xData}<br>辅导次数：${yData}`
            },
        },
        xAxis: {
            type: 'category',
            name: '类别',
            axisLabel: {
                interval: 0,
                rotate: 45,
            },
            data: chartData.value.xAxisData,
        },
        yAxis: {
            type: 'value',
            name: '辅导次数',
        },
        series: [
            {
                type: 'bar',
                data: chartData.value.seriesData,
            },
        ],
    }

    if (chartData.value.xAxisData.length === 0 || chartData.value.seriesData.length === 0) {
        chart.clear()
        chart.setOption({
            graphic: {
                type: 'text',
                left: 'center',
                top: 'middle',
                style: {
                    text: '暂无数据',
                    fill: '#999999',
                    fontSize: 14,
                },
            },
        })

        return
    }
    chart.setOption(option)
}

onMounted(async () => {
    await getActivities()
    await getCounsellings()
    await nextTick(initBarChart)
})

watch(
    () => props.extra.id,
    async (newVal, oldVal) => {
        if (newVal === oldVal) {
            return
        }
        await getActivities()
        await getCounsellings()
    },

    { deep: true }
)

watch(
    () => chartData.value.xAxisData,
    () => {
        nextTick(initBarChart)
    }
)

watch(
    () => chartData.value.seriesData,
    () => {
        nextTick(initBarChart)
    }
)
</script>

<style scoped>
.extra-curricular {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e8e8e8;
}

.el-row {
    width: 100%;
}

.el-col {
    flex: 1;
    box-sizing: border-box;
}

.el-card {
    width: 100%;
    margin: 0 0 10px 0;
}

.first-card {
    display: flex;
    height: 130px;
    text-align: center;
    margin: 0;
}

.first-card-bottom {
    /* 垂直居中 */
    position: relative;
    transform: translateY(-50%);
    margin: 0 auto;
    font-size: 13px;
    width: 80px;
    /* border: solid rgb(0, 255, 94) 1px; */
}

.third-card {
    display: flex;
    height: 130px;
    border-radius: 15px;
    text-align: center;
}

.image {
    position: relative;
    top: 20px;
    left: 130px;
    width: 60px;
    display: block;
}

.image1 {
    position: relative;
    top: 20px;
    left: 110px;
    width: 60px;
    display: block;
}

.demo-class {
    position: relative;
    top: -40px;
    left: 230px;
    width: 90px;
    /* border: solid red 1px; */
}

.blue {
    color: #175797;
}

.orange {
    color: #f59a23;
}

#main {
    margin: 0 auto;
    height: 398px;
    width: 390px;
}
</style>
